<template>
  <q-page>
    <div class='content' >
      <q-icon name="arrow_back" style="font-size: 2em;position: absolute" @click='goBack' />
      <div align='center' >
        <div style='font-weight: bold;font-size: 1.6em'>
          车辆照片
        </div>
        <div style='width: 8em;background-color: #F0C041;height: 6px' />
      </div>
      <div align='center' v-for='(item,index) in  imgurl' :key='index'>
        <div class='show-imgs'>
          <img style='height: 100%' :src='item.left' @click='bigImg(item.left)' />
        </div>
        <div class='show-imgs'>
          <img style='height: 100%' :src='item.right' @click='bigImg(item.right)' />
        </div>
      </div>

    </div>
    <div class='bigImage' :hidden='hideStat' @click='hideStat = true'>
      <img :src='bigImage'  style='width: 100%;position: absolute;top: 20vh'/>
    </div>
  </q-page>
</template>

<script setup lang='ts'>
import { ref } from 'vue'
import { useRouter } from 'vue-router';
import { useStore } from 'src/store';

interface Coupleimgs {
  left: string,
  right: string
}
let hideStat = ref<boolean>(true)
const store = useStore()
let inItemSwap = []
let swap = null;
const items = store.state.sphinx.imgUrls
items.forEach((item,index) => {
  if  (index%2 === 0) {
    swap = {left: {},right: {}};
    swap.left = item
    if (index === items.length) {
      inItemSwap.push(swap);
    }
  } else if (index%2 === 1) {
    swap.right = item
    inItemSwap.push(swap);
  }

})
const router = useRouter();



const imgurl = ref<Coupleimgs[]>(inItemSwap)
function goBack () {
  router.back()
}

let bigImage = ref<string>("");

function bigImg (url: string) {
  bigImage.value = url
  hideStat.value = false
}
</script>

<style scoped lang='sass'>
.content
  padding: 1em
.show-imgs
  margin: 0.2em
  text-align: center
  overflow: hidden
  width: 45%
  height: 9em
  border-radius: 2px
  background: #f3f3f3
  //box-shadow:  8px 8px 8px #cecece,-8px -8px 8px #f2f2f2
  display: inline-block
.bigImage
  width: 100vw
  height: 100%
  position: fixed
  left: 0px
  top: 0px
  background-color: rgba(0, 0, 0, 0.83)
</style>
